<template>
  <div id="radio_group">
    <div class="title" v-if="title">{{ title }}</div>
    <div class="radio_wrap">
      <!-- 日周月 榜单 -->
      <div class="classify_box" :class="{'br_box':isUnfoldItem,'init_box':isUnfold}" ref="classifyBox">
        <div class="classify_content" ref="classifyContent">
          <div
            :class="{
              radio_item: true,
              radio_item_blue: radio_value == item && isSearch != '1',
              radio_item_blue_search: radio_value == item && isSearch == '1'
            }"
            v-for="(item, index) in radio_values"
            :key="'radio_group' + index"
            @click="
              now_radio_value = item;
              $emit('returnBack', now_radio_value);
            "
          >
            {{ item }}
          </div>
          <i @click="unfoldFn" class="unfold_btn" :class="isUnfold?'unfold':''" v-if="isUnfoldItem && isShowBtn">
            {{
            isUnfold ? "收起" : "展开"
            }}
          </i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "radio_group",
  data() {
    return {
      now_radio_value: this.radio_value,
      isUnfold:false,
      isShowBtn:true, //是否展示按钮
    };
  },
  model: {
    prop: "radio_value",
    event: "returnBack"
  },
  props: ["radio_values", "radio_value", "title", "isSearch" ,"isUnfoldItem"],
  created: function() {
    this.$watch("radio_value", function(newValue, oldValue) {
      this.now_radio_value = this.radio_value;
    });
  },
  mounted(){
    this.initClassify();
  },
  methods:{
    unfoldFn() {
      this.isUnfold = !this.isUnfold;
    },
    initClassify(){
      if(!this.isUnfoldItem) return;
      this.isUnfold = false;
      this.$nextTick(() => {
        let box = this.$refs.classifyBox;
        if (!box) return;
        let childBox = this.$refs.classifyContent;
        let boxHeight = box.offsetHeight;
        let childBoxHeight = childBox.offsetHeight;
        // console.log(boxHeight);
        // console.log(childBoxHeight);
        if (childBoxHeight > boxHeight) { //如果分类换行后高度大于盒子的高度，则显示展开按钮
          this.isUnfold = false;
          this.isShowBtn = true;
        }else{
          this.isUnfold = true;
          this.isShowBtn = false;
        }
      })
    }
  },
  watch:{
    radio_values(a){
      this.initClassify();
    }
  }
};
</script>
<style scoped lang="less">
#radio_group {
  display: flex;
  margin-bottom: 5px;
  .title {
    font-size: 14px;
    line-height: 32px;
    white-space: nowrap;
    color: #888888;
    margin-right: 20px;
    // 两端对齐
    // width: 56px !important;
    // text-align-last: justify;
  }
  .radio_item {
    cursor: pointer;
    outline: none;
    height: 32px;
    border-radius: 4px;
    font-size: 14px;
    color: #555555;
    line-height: 32px;
    margin-bottom: 7px;
    padding: 0 16px;
    margin-right: 8px;
    box-sizing: border-box;
  }
  .radio_item:hover {
    color: #ff924b;
  }
  .radio_item_blue {
    color: #fff !important;
    background-color: #fd7f2c !important;
  }
  .radio_item_blue_search {
    color: #fd7f2c !important;
    background-color: #fff1e8 !important;
  }
  .radio_item:first-child {
    margin-left: 0;
  }
  .radio_wrap {
    .classify_box{
      position: relative;
      &.br_box{
        height: 78px;
        overflow: hidden;
      }
      &.init_box{
        height: initial;
        overflow: initial;
      }
      .unfold_btn {
        position: absolute;
        right: 0;
        bottom: 3px;
        font-size: 14px;
        line-height: 39px;
        font-style: normal;
        color: #ff924b;
        cursor: pointer;
        // padding-left: 10px;
        // background-image: linear-gradient(to right, rgba(255,255,255,.5) , rgba(255,255,255,1));
        &.unfold{
          position: relative;
          margin-top: -3px;
          right: initial;
          bottom: initial;
        }
      }
      .classify_content{
        display: flex;
        flex-wrap: wrap;
      }
    }
  }
}
</style>
